<template>
    <div id="building">


        <el-container>
        <el-header style="background-color: #E79335;position: relative" height="40px">
            <div>
                <el-input v-model="inputfirst" style=" margin-top: 6px;margin-left: 400px;width: 400px; height: 25px;position: absolute" >
                    <template #append>
                        <el-icon><Search /></el-icon>
                    </template>
                </el-input>
            </div>
            <div style="position: absolute;margin-left: 810px">
                <el-avatar
                        :src="require('../img/person2.jpg')"
                        size="small"
                        style="margin-top: 7px;"
                />
            </div>

            <div style="position: absolute;margin-left: 840px;margin-top: 6px">
                <span @click="userdetail" style="font-size: 0.8em;color: white">用户名</span>
            </div>

            <div style="position: absolute;margin-left: 1000px;margin-top: 10px;color: white;font-size: 0.8em;">
                <span @click="shouye">首页</span>
                <el-divider direction="vertical"></el-divider>
                <span>搜索好友</span>
                <el-divider direction="vertical"></el-divider>
            </div >
            <div style="position: absolute;margin-left: 1130px;margin-top: 6px;">
                <el-image style="width: 25px;height: 25px;"
                          :src="require('../img/haoyou.svg')"></el-image>
                <el-image style="width: 25px;height: 25px;margin-left: 3px"
                          :src="require('../img/duanxin.svg')"></el-image>

                <el-image style="width: 23px;height: 23px;margin-left: 8px"
                          :src="require('../img/xinfeng.svg')"></el-image>

            </div>

            <div  style="position: absolute;margin-left: 1220px;margin-top: 8px">
                <el-divider direction="vertical"></el-divider>
                <el-dropdown>
                <span class="el-dropdown-link">
                    <el-image style="width: 23px;height: 23px;margin-left: 6px"
                              :src="require('../img/help.svg')"></el-image>
                 <el-icon class="el-icon--right">
                    <arrow-down />
                </el-icon>
             </span>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item>健康</el-dropdown-item>
                            <el-dropdown-item>动态记录</el-dropdown-item>
                            <el-dropdown-item>动态消息偏好设置</el-dropdown-item>
                            <el-dropdown-item>设置</el-dropdown-item>
                            <el-dropdown-item divided @click="tuichu">退出</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </div>
        </el-header>

            <el-main>
            <div>
                <div id="beijing">

                </div>
                <div id="baisedi">
                    <el-avatar style="margin-top: -60px;margin-left: 10px"  :size="100" :src="require('../img/person2.jpg')" />
                    <div style="margin-left: 120px;margin-top: -80px">
                    <el-text style="font-family: 微软雅黑;font-weight: bolder;">黄晶晶</el-text>
                    </div>
                    <el-tabs style="margin-top: 110px;margin-left: 18px">
                        <el-tab-pane label="帖子" name="first"></el-tab-pane>
                        <el-tab-pane label="简介" name="second"></el-tab-pane>
                        <el-tab-pane label="好友" name="third"></el-tab-pane>
                        <el-tab-pane label="视频" name="fourth"></el-tab-pane>
                        <el-tab-pane label="音乐" name="fifth"></el-tab-pane>
                        <el-tab-pane label="文章" name="sixth"></el-tab-pane>
                        <el-tab-pane label="更多" name="seventh"></el-tab-pane>
                    </el-tabs>
                </div>
                <div style="width: 500px;margin-left: 700px;margin-top: 10px">
                    <div>
                <el-input v-model="input1" style="height: 50px" placeholder="快来分享你的新鲜事吧！">
                    <template #append>
                        <el-icon size="20px"><Picture /></el-icon>
                        <el-icon size="20px"><Film /></el-icon>
                        <el-icon size="20px"><Headset /></el-icon>
                        <el-icon size="20px"><Edit /></el-icon>
                    </template>
                </el-input>
                    </div>
                </div>
            </div>
            </el-main>



        </el-container>

        <div style="position:absolute; margin-top: -70px;margin-left: 420px">
            <el-card style="width: 270px;height: 210px">
                <div>
                <el-text style="font-size: 15px">简介</el-text>
                </div>
                <div style="margin-top: 30px">
                    <el-icon size="20px"><School /></el-icon>
                    <div style="margin-left: 35px; margin-top: -25px">
                    <el-text >曾就读于</el-text>&nbsp;&nbsp;<el-text style="color: blue;" >xxx大学</el-text>
                    </div>
                </div>
                <div style="margin-top: 10px">
                    <el-icon size="20px"><House /></el-icon>
                    <div style="margin-left: 35px; margin-top: -25px">
                        <el-text >所在地</el-text>&nbsp;&nbsp;<el-text style="color: blue;" >xx市</el-text>
                    </div>
                </div>
                <div style="margin-top: 10px">
                    <el-icon size="20px"><LocationInformation /></el-icon>
                    <div style="margin-left: 35px; margin-top: -25px">
                        <el-text >ip地址</el-text>&nbsp;&nbsp;<el-text style="color: blue;" >xx市</el-text>
                    </div>
                </div>
                <el-button style="margin-top: 20px;margin-left: 5px;width: 220px;height: 30px" type="info" plain>编辑详细信息</el-button>

            </el-card>
        </div>

        <div style="position:absolute; margin-top: 150px;margin-left: 420px">
            <el-card style="width: 270px;height: 420px">
                <div>
                    <el-text style="font-size: 15px">文章</el-text>
                </div>
                <div style="float: right;margin-top: -20px">
                    <el-icon><MoreFilled /></el-icon>
                </div>


                        <el-image style="width: 100px;height: 180px" :src="require('../img/book1.jpg') ">
                        </el-image>


                        <el-image style="width: 100px;height: 180px;margin-left: 14px" :src="require('../img/book2.jpg') ">
                        </el-image>
                <el-image style="width: 100px;height: 180px" :src="require('../img/book3.jpg') ">
                </el-image>


                <el-image style="width: 100px;height: 180px;margin-left: 14px" :src="require('../img/book4.jpg') ">
                </el-image>





            </el-card>
        </div>


        <div>
            <el-card style=" margin-top: -10px; width: 500px;margin-left: 720px" shadow="hover">
                <div>
                    <div style="float:left;">
                        <el-avatar
                            :src="require('../img/person2.jpg') "
                        />
                    </div>
                    <div style="float: right">
                        <el-icon><MoreFilled /></el-icon>
                    </div>

                    <div style="float:left;">
                        <el-text style="font-family: 楷体;font-size: large;">
                            黄晶晶
                        </el-text>
                    </div>
                    <br>
                    <div>
                        <el-text style="font-size: smaller; color: #CCCCCC">
                            8分钟
                        </el-text>
                    </div>

                </div>
                <br>

                <div>
                    <el-text style="font-size: small;">
                        作为一位大二学生，了解自闭症这个群体的现状，我建立这个网站，一开始想为广大患者以及家属提供一块互帮互助的净土，不知不觉这里聚集了越来越多的来自社会各界的人士，感谢你们的到来，愿每个来自星星的孩子都获得关爱与保护，希望我们不忘初心，希望“护星行动”越来越好，各位有什么建议以及意见都可以踊跃发言，让我们一起，携手向未来                    </el-text>
                </div>
                <div>
                    <el-image :src="require('../img/wodetiezi.jpg') "></el-image>
                </div>
                <div style="margin-top: 5px">
                    <el-avatar size="small" :src="require('../img/person1.jpg') "></el-avatar>
                    <el-avatar size="small" :src="require('../img/person2.jpg') "></el-avatar>
                    <el-avatar size="small" :src="require('../img/person6.jpg') "></el-avatar>
                    <el-text style="font-size: 0.5em;">+520个赞</el-text>
                    <div style="float: right">
                        <el-image style="width: 25px;height: 25px;margin-right: 3px" :src="require('../img/like.svg')"></el-image>
                        <el-image style="width: 25px;height: 25px;margin-right: 3px" :src="require('../img/pinglun.svg')"></el-image>
                        <el-image style="width: 25px;height: 25px;margin-right: 3px" :src="require('../img/share.svg')"></el-image>
                    </div>
                    <el-input style="margin-top: 10px" v-model="input2" placeholder="写下评论">
                        <template #append>
                            <el-image style="width: 25px;height: 25px;"
                                      :src="require('../img/smile.svg')"></el-image>

                        </template>
                    </el-input>
                </div>
            </el-card>
        </div>
        <div>
            <el-card style="width: 500px;margin-left: 720px;margin-top: 10px" shadow="hover">
                <div>
                    <div style="float:left;">
                        <el-avatar
                            :src="require('../img/person2.jpg') "
                        />
                    </div>
                    <div style="float: right">
                        <el-icon><MoreFilled /></el-icon>
                    </div>

                    <div style="float:left;">
                        <el-text style="font-family: 楷体;font-size: large;">
                            黄晶晶
                        </el-text>
                    </div>
                    <br>
                    <div>
                        <el-text style="font-size: smaller; color: #CCCCCC">
                            三天前
                        </el-text>
                    </div>

                </div>
                <br>

                <div>
                    <el-text style="font-size: small;">
                        刚刚又有患者家属向我报喜，所有来自星星的孩子，希望你们早日康复♥
                        很喜欢一句话，“但愿世上无疾苦，宁可架上药生尘”。
                    </el-text>
                </div>

                <div style="margin-top: 5px">
                    <el-avatar size="small" :src="require('../img/person4.jpg') "></el-avatar>
                    <el-avatar size="small" :src="require('../img/person12.jpg') "></el-avatar>
                    <el-avatar size="small" :src="require('../img/person11.jpg') "></el-avatar>
                    <el-text style="font-size: 0.5em;">+520个赞</el-text>
                    <div style="float: right">
                        <el-image style="width: 25px;height: 25px;margin-right: 3px" :src="require('../img/like.svg')"></el-image>
                        <el-image style="width: 25px;height: 25px;margin-right: 3px" :src="require('../img/pinglun.svg')"></el-image>
                        <el-image style="width: 25px;height: 25px;margin-right: 3px" :src="require('../img/share.svg')"></el-image>
                    </div>
                    <el-input style="margin-top: 10px" v-model="input3" placeholder="写下评论">
                        <template #append>
                            <el-image style="width: 25px;height: 25px;"
                                      :src="require('../img/smile.svg')"></el-image>

                        </template>
                    </el-input>
                </div>
            </el-card>
        </div>
    </div>

</template>

<script>

export default {
    name: "userDetail",
    data(){
        return {
            inputfirst:'',
            input1:'',
            input2:'',
            input3:'',
        }
    },
    methods : {
        tuichu(){
            this.$router.push('/')
        },
        userdetail(){
            this.$router.push('/user')
        },
        shouye(){
            this.$router.push('/home')
        }

    }
}
</script>

<style scoped>
#building{
    background-color: #f3f3f3;
    width:100%;
    height:100%;
    background-size:100% 100%;

}
#beijing{
    background: url("../img/user.png");;
    margin-left: 400px;
    margin-top: -150px;
    width:800px;
    height: 300px;
    background-size:100% 100%;
}
#baisedi{
    background-color: white;
    margin-top: 0;
    width:800px;
    margin-left: 400px;
    height: 140px;
    background-size:100% 100%;
}

</style>
